<template>
    <div>
        <div class="searchArea">
            <el-input v-model="groupName" placeholder="分组名" class="searchTextInput" clearable/>
            <el-button type="primary" class="searchButton" @click="loadData">查询</el-button>

            <div class="addGroupArea">
                <el-button type="primary" class="searchButton" @click="isShowCreateEnvGroupDialog = true" plain>新增</el-button>
            </div>
        </div>

        <div class="table">
            <el-table 
            :data="tableData" 
            style="width: 100%" 
            max-height="500" 
            stripe 
            border 
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{textAlign:'center'}"
            >
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="groupID" label="分组ID" width="150">
                    <template #default="scope">
                        <div style="user-select:text ;">
                            <el-tooltip
                                raw-content
                                class="box-item"
                                popper-class="idtip"
                                effect="dark"
                                :content="getToolTipContent(scope.row.groupID)"
                                placement="top"
                                style="user-select:text ;"
                            >
                                <div class="IDStr">{{scope.row.groupID}}</div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="groupName" label="分组名" width="120" />
                <el-table-column prop="createAccount" label="创建人" width="120" />
                <el-table-column prop="createTime" label="创建时间" width="155" :formatter="formatTime"/>
                <el-table-column prop="morder" label="排序" width="120" />
                <el-table-column fixed="right" label="操作" >
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClickEdit(scope.row)"
                        >编辑</el-button>
                        <el-button link type="primary" size="small" @click="handleClickDel(scope.row)" style="margin-left:0px;"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200, 250, 300]"
                :small="false"
                :disabled="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="loadData"
                @current-change="loadData"
                total-text="总共"
                style="justify-content:end"
            />
        </div>
        <CreateEnvGroupDialog v-model:isShow="isShowCreateEnvGroupDialog" :handleUpdated="loadData"></CreateEnvGroupDialog>
        <EditEnvGroupDialog v-model:isShow="isShowEditEnvGroupDialog" v-model:data="selectedData" :handleUpdated="loadData"></EditEnvGroupDialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import EnvApi from '../../../apis/env'
import { table } from 'console';
import CreateEnvGroupDialog from './CreateEnvGroupDialog.vue';
import EditEnvGroupDialog from './EditEnvGroupDialog.vue';
import {formatTime} from '../../../utils/TimeUtils'

const router = useRouter();
const route = useRoute();

var tableData:any = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(200)

const groupName = ref("");
const isShowCreateEnvGroupDialog = ref(false);
const isShowEditEnvGroupDialog = ref(false);
const selectedData = ref({});

onMounted(()=>{
    loadData();
})

const loadData = () => {
    EnvApi.fetchEnvGroup(groupName.value, currentPage.value-1, pageSize.value).then(ret=>{
        if(ret.code == 0){
            tableData.value = ret.data.list;
            total.value = ret.data.totalCount;
            currentPage.value = ret.data.page+1;
            pageSize.value = ret.data.pageSize;
        }else{
            ElMessage({
            type: 'error',
            message: ret.message,
        })
        }
    }).catch(err=>{
        ElMessage({
            type: 'error',
            message: err,
        })
    })
}

const handleClickEdit = (row:any) => {
    selectedData.value = row;
    isShowEditEnvGroupDialog.value = true;
}

const handleClickDel = (row:any) => {
    ElMessageBox.confirm(`确认删除分组${row.groupName}吗?`,'温馨提示',
        {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(ret=>{
        return EnvApi.delteEnvGroup(row.id);
    }).then(ret=>{
        if(ret.code == 0){
            ElMessage({
                type: 'success',
                message: "删除成功",
            })
            loadData();
        }else{
            ElMessage({
                type: 'error',
                message: ret.message,
            })
        }
    }).catch(err=>{
        if(err=="cancel"){
            ElMessage({
                type: 'info',
                message: "取消删除操作",
            })
        }else{
            ElMessage({
                type: 'error',
                message: "删除失败",
            })
        }
    })
}

const getToolTipContent = (envID:any)=>{
    return "<div style='user-select: text;'>" + envID +"</div>";
}

</script>

<style scoped>
.searchArea {
    padding-bottom: 10px;
}
.searchButton {
    margin-left: 0px;
}
.searchTextInput {
    width: 120px;
    margin-right: 10px;
}
.pagination {
    margin-top: 15px;
}
.addGroupArea {
    display: inline-flex;
    position: absolute;
    right: 20px;
}
.IDStr {
    text-overflow:ellipsis; 
    width: 130px;
    overflow:hidden;
    white-space:nowrap;
}
</style>
